import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import Confirm from '#cpt/temp/Confirm'
import AddEditModal from '#cpt/temp/AddEditModal'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Box = $Lazy.load(()=>import('#tp/box/box'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 提交表单列表
		formData : [
			{ label: '项目别名',		name: 'alias_name', full:true, required:true },
			{ label: '英文名称',  	name: 'name_en', 	full:true}
		]
	}
	
	model = {}
	
	componentDidMount(){
		const { kind_id } = this.props
		this.model = this.submit= { kind_id }
		this.fetch()
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'kind-alias/index')
	
	// 表单
	cols = [
		{ title: '项目别名', 	dataIndex: 'alias_name', 	width:'50%' },
		{ title: '项目英文', 	dataIndex: 'name_en', 		width:'50%' },
	]
	// 操作按钮
	controls = () => {
		const { disabled } = this.props
		return [
			Controls.add.call(this,{code:false, disabled}),
			Confirm.call(this,'删除', 'kind-alias/delete', { isKeys: true, ghost:true })
		]
	}
	render(){
		const { disabled } = this.props
		return (
			<>
				<Box title='项目别名' controls={this.controls()} className='mt5' contentClassName='pt10'>
					{/* 表格 */}
					{ Table.call(this, { wrapStyle: this.props.tableStyle, disabled }) }
				</Box>
				{/* 添加、编辑 */}
				{ AddEditModal.call(this,{ title:'项目别名', labelWidth:'s5', width:600, api: 'kind-alias/add',  }) }
			</>
		)
	}
}

export default Index